<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>上传图片</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="js/imagecropper/cropper.css" />
		<style type="text/css">
			#startUpload {
				background: #e9380e;
				border: none;
				color: #fff;
				margin-top: 100px;
			}
			
			#uploadList a {
				color: #e9380e;
			}
			
			.piclist .pic {
				float: left;
			}
			
			.piclist {
				width: 100%;
			}
			
			#img {
				display: none;
			}
		</style>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
		<script type="text/javascript" src="js/imagecropper/cropper.js"></script>
		<script src="js/qiniuupload-0.9.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="uploadList">
			<a class="pic" href="#picture" id="tu1" cut="cuting">
				<img src="../images/logo.png" />
			</a>
			<a class="pic" href="#picture" id="tu3">
				<img src="../images/logo.png" />
			</a>
			<!--<a class="pic" href="#picture" id="tu2" cut="cuting">
				<img src="../images/logo.png" />
			</a>
			<a class="pic" href="#picture" id="tu4">
				<img src="../images/logo.png" />
			</a>-->
			<!--	<a class="pic" href="#picture" id="tu1" cut="cuting" noauto="noauto">
				<img src="../images/logo.png" />
			</a>
					<a class="pic" href="#picture" id="tu2" cut="cuting">
				<img src="../images/logo.png" />
			</a>
			<a class="pic" href="#picture" id="tu3">
				<img src="../images/logo.png" />
			</a>
			<div class="piclist">
				<div class="pic">
					<p class="btnlist mui-hidden">
						<button class="mui-icon mui-icon-trash"></button>
						<button class="mui-icon mui-icon-compose"></button>
					</p>
					<img src="../images/logo.png" />
				</div class="piclist">
				<div class="pic">
					<p class="btnlist mui-hidden">
						<button class="mui-icon mui-icon-trash"></button>
						<button class="mui-icon mui-icon-compose"></button>
					</p>
					<img src="../images/logo.png" />
				</div>

				<a id="addbtn" class="mui-icon mui-icon-plus" href="#picture"></a>
			</div>-->
			<!--<div class="piclist">
				<div class="pic">
					<p class="btnlist mui-hidden">
						<button class="mui-icon mui-icon-trash"></button>
						<button class="mui-icon mui-icon-compose"></button>
					</p>
					<img src="../images/logo.png" />
				</div class="piclist">
				<div class="pic">
					<p class="btnlist mui-hidden">
						<button class="mui-icon mui-icon-trash"></button>
						<button class="mui-icon mui-icon-compose"></button>
					</p>
					<img src="../images/logo.png" />
				</div>
				<a id="addbtn" class="mui-icon mui-icon-plus" href="#picture"></a>
			</div>-->
			<div class="piclist">
				<a id="addbtn3" class="mui-icon mui-icon-plus" href="#picture"></a>
			</div>
			<div class="piclist">
				<a id="addbtn4" class="mui-icon mui-icon-plus" href="#picture"></a>
			</div>
		</div>
		<button id="startUpload" type="button" class="mui-btn mui-btn-block mui-disabled">保存修改</button>
		<button id="allpush" class="mui-btn mui-btn-block">全部信息提交到服务器</button>
	</body>

</html>
<script type="text/javascript">
	qiniuupload({
		uploadListId: "uploadList", //待上传图片列表
		startUploadId: "startUpload", //开始上传按钮
		uploadMax: 1, //一个盒子内最多能添加的数量
		hideLoaded: false, //清除已上传
		uptokenUrl: 'http://10.8.45.1:8080/qiniuTest/getToken?bucket=test1', //获取服务器验证七牛uptoken的服务器地址
		picUrl: "http://ongwb2t5i.bkt.clouddn.com" //七牛账号的图片地址
	});

	$("#allpush").on("tap", function() {
		if(xhrNumber == 0) {
			var urlStr = "",
				$inputAll = $("input[name='picurl']"),
				$inputAllLength = $inputAll.length;
			$inputAll.each(function(n, item) {
				if(n == $inputAllLength - 1) {
					urlStr += item.value;
				} else {
					urlStr += item.value + ",";
				};
			});
			alert(urlStr);
			$.ajax({
				type: "post",
				url: "",
				async: true,
				data: urlStr,
				success: function(result) {

				}
			});
		} else {
			mui.toast("图片还没有传完")
		}
	});
	/*	sessionStorage.uptoken ="ZJe6XicoEEAA8idMiNlTjrE2VMZe2ssITzApMFGO";
		picUrl: "http://omjbzg6gs.bkt.clouddn.com" //七牛账号的图片地址*/
</script>